<!-- 档案查阅单 -->
<template>
	<view>
		<u-form :model="model" :rules="rules" ref="form" labelPosition="top" labelWidth="auto" :labelStyle="{
        fontSize: '14px',
        color: '#B2B2B2',
        lineHight: '20px',
      }">
			<view class="basic-style">
				<view class="basic-title basic-border">基本信息</view>
				<u-form-item label="单据编号" prop="billNo" required>
					<u--input v-model="model.billNo" disabled></u--input>
				</u-form-item>
				<u-form-item label="申请时间" prop="createTime" required>
					<u--input v-model="model.createTime" disabled suffixIcon="calendar-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }" placeholder="请选择日期"></u--input>
				</u-form-item>
				<u-form-item label="申请人" prop="employeeId" required>
					<h-select-person-input style="width: 100%" disabled v-model="model.employeeId" placeholder="请选择申请人"
						border="surround" suffixIcon="arrow-down-fill" :suffixIconStyle="{ color: '#B2B2B2' }"
						objectField="model.employeeId"></h-select-person-input>
				</u-form-item>
				<u-form-item label="申请部门" prop="departId" required>
					<h-select-depart-input disabled v-model="model.departId" :departName="model.departIdText"
						placeholder="请选择部门" border="surround" style="width: 100%" suffixIcon="arrow-down-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }"
						:title.sync="model.departIdText"></h-select-depart-input>
				</u-form-item>
				<u-form-item label="申请人所属团队" prop="teamId" required>
					<h-select-team-input style="width: 100%" v-model="model.teamId" objectField="model.teamId"
						placeholder="请选择申请人所属团队" border="surround" :tdlx="3" suffixIcon="arrow-down-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }" ></h-select-team-input>
				</u-form-item>
			</view>
			<view class="basic-style">
				<view class="basic-title basic-border">查阅信息</view>
				<u-form-item label="档案大类" prop="docBigCategory" required>
					<h-dropdown class="w-100" keyName="title" placeholder="请选择" :api="api.queryProvisionBroadList"
						v-model="model.docBigCategory" :params="{ pcode: 'A04', async: true, removeCode: '' }"
						dataKey="result" valName="code" suffixIcon="arrow-down-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }" @change="docBigCategoryChange" />
				</u-form-item>
				<u-form-item label="档案小类" prop="docSmallCategory" required>
					<h-dropdown class="w-100" keyName="title" ref="provisionSmall" placeholder="请选择"
						:disabled="!model.docBigCategory" :api="api.queryProvisionBroadList"
						v-model="model.docSmallCategory"
						:params="{ pcode: model.docBigCategory, async: true, removeCode: '' }" dataKey="result"
						valName="code" suffixIcon="arrow-down-fill" :suffixIconStyle="{ color: '#B2B2B2' }"
						@change="docSmallCategoryChange" />
				</u-form-item>
				<u-form-item label="文件名称" prop="docName" required>
					<h-select-oadoc-base-input-popup
						v-if="model.docBigCategory == 'A04A01' || model.docBigCategory == 'A04A02'" style="width: 100%"
						v-model="model.docName" border="surround" placeholder="请选择文件名称"
						:disabled="!model.docSmallCategory" suffixIcon="arrow-down-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }" :docBigCategory="model.docBigCategory"
						:docSmallCategory="model.docSmallCategory"
						@change="docNameInput"></h-select-oadoc-base-input-popup>
					<h-select-project-archive-input-popup v-else style="width: 100%" v-model="model.docName"
						border="surround" placeholder="请选择文件名称" :disabled="!model.docSmallCategory"
						suffixIcon="arrow-down-fill" :suffixIconStyle="{ color: '#B2B2B2' }"
						:archiveMajorCategory="model.docBigCategory" :archiveMinorCategory="model.docSmallCategory"
						@change="docNameInput"></h-select-project-archive-input-popup>
				</u-form-item>
				<u-form-item label="密级" prop="docClassification">
					<h-select-input-tag disabled class="w-100" v-model="model.docClassification"
						objectField="model.docClassification" placeholder="请选择密级" border="surround"
						dictName="secrecy_level"></h-select-input-tag>
				</u-form-item>

				<u-form-item label="存放位置" prop="docAddress">
					<u--input v-model="model.docAddress" placeholder="请输入存放位置" disabled></u--input>
				</u-form-item>
				<u-form-item label="档案所属团队" prop="docTeamId" required>
					<h-select-team-input disabled style="width: 100%" v-model="model.docTeamId"
						objectField="model.docTeamId" placeholder="请选择档案所属团队" suffixIcon="arrow-down-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }" border="surround" :tdlx="3" />
				</u-form-item>
				<u-form-item label="是否外带" prop="isOutside" :borderBottom="false" required>
					<h-dict-radio v-model="model.isOutside" dictName="YES_OR_NO"></h-dict-radio>
				</u-form-item>
				<u-form-item label="借阅日期" prop="referenceTime" required>
					<h-time-select v-model="model.referenceTime" placeholder="请选择借阅日期" border="surround"
						suffixIcon="calendar-fill" :suffixIconStyle="{ color: '#B2B2B2' }"></h-time-select>
				</u-form-item>
				<u-form-item label="份数" prop="totalNumber">
					<h-number-input placeholder="请输入份数" :digit="0" :min="0"
						v-model="model.totalNumber"></h-number-input>
				</u-form-item>
				<u-form-item label="预计归还时间" prop="backTime" required>
					<h-time-select v-model="model.backTime" placeholder="请选择预计归还时间" border="surround"
						suffixIcon="calendar-fill" :suffixIconStyle="{ color: '#B2B2B2' }"></h-time-select>
				</u-form-item>
				<u-form-item label="借阅事由" prop="referenceReason" required>
					<u--textarea :confirm-type="null" maxlength="500" count v-model="model.referenceReason"
						placeholder="请输入借阅事由"></u--textarea>
				</u-form-item>
			</view>

			<view class="basic-style">
				<view class="basic-title basic-border">附件信息</view>
				<view class="py-1 space-y-1" style="width: 100%">
					<view style="color: red">提示：请等待附件上传完成，再点击保存，否则附件无法保存成功！</view>
					<h-upload-file v-model="model.attachment" :isIcon="false"></h-upload-file>
					<file-list v-if="model.attachment" v-model="model.attachment" :isDelete="true"></file-list>
				</view>
			</view>

			<view class="space-x-1 px-1 btn_position">
				<u-button :disabled="isSubmit" type="primary" :plain="true" text="保存" @click="onDraft"></u-button>
				<u-button :disabled="isSubmit" type="primary" text="保存并提交" @click="onSubmit"></u-button>
			</view>
			<view style="height: 100rpx"></view>
		</u-form>

		<u-toast ref="uToast"></u-toast>
		<ProcessNodeConfiguration ref="processConfig" @ok="onOk"></ProcessNodeConfiguration>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import moment from 'moment'
	import {
		gainBillNo,
		add,
		info,
		edit,
		queryByCode,
		queryProvisionBroadList
	} from '@/api/work/ErpOaDocReferenceBillForm'

	import fileList from '@/pages/synergy/components/fileList.vue'
	import ProcessNodeConfiguration from '@/components/ProcessNodeConfiguration/ProcessNodeConfiguration.vue' // 流程节点配置人员选择弹窗
	export default {
		name: 'ErpOaDocReferenceBillForm',
		components: {
			fileList,
			ProcessNodeConfiguration,
		},
		data() {
			return {
				timeout: null,
				isSubmit: false, // 控制按钮是否可以点击
				backUpProvisionBroad: '',
				showBusinessSegment: false,
				exportTeamId: '',
				flag: false,
				index: null,
				showFormModal: false,
				confirmModal: false,
				loading: false,
				id: '',
				exportWarehouseList: [],
				foldWarehouseList: [],
				dataSource2: [],
				basicForm: {},
				// formData: [],
				api: {
					queryProvisionBroadList,
				},
				model: {
					// 基本信息 - 公用
					bpmBizTitle: '',
					billNo: '',
					createTime: '',
					employeeId: '',
					departId: '',
					teamId: '',
					docBigCategory: '',
					docSmallCategory: '',
					docName: '',
					docBillNo: '',
					docClassification: '',
					docAddress: '',
					docTeamId: '',
					isOutside: '',
					referenceTime: '',
					totalNumber: '',
					backTime: '',
					referenceReason: '',
					// 附件
					attachment: null,
				},
				//   provisionBroadups: null,
				rules: {
					billNo: [{
						required: true,
						message: '请输入单据编号!',
						trigger: ['blur', 'change']
					}],
					departId: [{
						required: true,
						message: '请选择申请部门!',
						trigger: ['blur', 'change']
					}],
					teamId: [{
						required: true,
						message: '请选择申请人所属团队!',
						trigger: ['blur', 'change']
					}],
					employeeId: [{
						required: true,
						message: '请选择申请人!',
						trigger: ['blur', 'change']
					}],
					docTeamId: [{
						required: true,
						message: '请选择档案所属团队!',
						trigger: ['blur', 'change']
					}],
					createTime: [{
						required: true,
						message: '请选择申请时间!',
						trigger: ['blur', 'change']
					}],

					docBigCategory: [{
						required: true,
						message: '请选择档案大类!',
						whitespace: true,
						trigger: ['blur', 'change']
					}],
					docSmallCategory: [{
						required: true,
						message: '请选择档案小类!',
						whitespace: true,
						trigger: ['blur', 'change']
					}],
					isOutside: [{
						required: true,
						message: '请选择是否外带!',
						whitespace: true,
						trigger: ['blur', 'change']
					}],
					referenceTime: [{
						required: true,
						message: '请选择借阅日期!',
						whitespace: true,
						trigger: ['blur', 'change']
					}],
					docName: [{
						required: true,
						message: '请选择文件名称!',
						trigger: ['blur', 'change']
					}],
					backTime: [{
						required: true,
						message: '请选择预计归还时间!',
						whitespace: true,
						trigger: ['blur', 'change']
					}],
					referenceReason: [{
						required: true,
						message: '请输入借阅事由!',
						whitespace: true,
						trigger: ['blur', 'change']
					}],
				},

				//代码生成后需手动设置流程编码
				processId: '1560089400301527041',
				flowCode: 'onl_erp_oa_doc_reference_bill',
				formUrl: '/oa/doc/modules/ErpOaDocReferenceBillForm',
				formUrlMobile: '/pages/synergy/erpOaDocReferenceBillForm',
				beanName: 'erpOaDocReferenceBillServiceImpl',
			}
		},
		onLoad({
			id
		}) {
			this.id = id || ''
		},
		onUnload() {
			if (this.timeout) {
				clearTimeout(this.timeout)
				this.timeout = null
			}
		},
		created() {
			if (this.id) {
				this.initInfo()
				//   this.initDataList()
			} else {
				this.initForm()
				this.initBillNo()
			}
			// this.initBuyerInfo()
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			getCategoryName(code) {
				return new Promise((resolve, rej) => {
					queryByCode({
						code: code
					}).then((res) => {
						if (res.success) {
							return resolve(res.result ? res.result.name : '')
						} else {
							return resolve("");
						}
					})
				})
			},
			docNameInput(doc) {
				if (doc) {
					this.$set(this.model, 'docTeamId', doc.teamId)
					this.$set(this.model, 'docBillNo', doc.billNo)
					this.$set(this.model, 'docClassification', doc.classification)
					this.$set(this.model, 'docAddress', doc.docAddress)
				}
			},
			docSmallCategoryLoadData() {
				// $nextTick 解决大类修改后小类接口 params 未更新的问题
				this.$nextTick(() => {
					this.$refs.provisionSmall.loadData()
				})
			},
			docBigCategoryChange(docCategoryCode) {
				this.$set(this.model, 'docBigCategory', docCategoryCode) // 档案编码
				this.docSmallCategoryLoadData()
				if (docCategoryCode) {
					if (this.model.docSmallCategory) {
						this.$set(this.model, 'docSmallCategory', null)
					}
					this.$set(this.model, 'docName', null)
					this.$set(this.model, 'docTeamId', null)
					this.$set(this.model, 'docClassification', null)
					this.$set(this.model, 'docAddress', null)
				}
			},
			docSmallCategoryChange(docCategoryCode) {
				this.$set(this.model, 'docSmallCategory', docCategoryCode) // 档案编码
				if (docCategoryCode) {
					this.$set(this.model, 'docName', null)
					this.$set(this.model, 'docTeamId', null)
					this.$set(this.model, 'docClassification', null)
					this.$set(this.model, 'docAddress', null)
				}
			},
			// 获取单据编号
			async initBillNo() {
				const res = await gainBillNo()
				this.model.billNo = res.result
			},
			// 初始化新增需要的数据
			initForm() {
				this.model.employeeId = this.userInfo.empId //当前登录人
				this.model.departId = this.userInfo.deptId //当前登录人部门
				// this.model.beforePostId = this.userInfo.postIds //当前登录人岗位
				this.model.createTime = moment().format('YYYY-MM-DD HH:mm:ss')
			},
			async initInfo() {
				const response = await info({
					id: this.id
				})
				const data = response?.result || {}
				this.model = Object.assign({}, data)
				this.timeout = setTimeout(() => {
					this.docSmallCategoryLoadData()
					clearTimeout(this.timeout)
				}, 300)
			},
			validateForm() {
				return this.$refs.form.validate()
			},
			async setBpmBizTitle() {
				const docBigCategory = await this.getCategoryName(this.model.docBigCategory)
				const docSmallCategory = await this.getCategoryName(this.model.docSmallCategory)
				this.model.bpmBizTitle =
					'档案查阅单' +
					'-' +
					(docBigCategory? docBigCategory +  ' - ' : '') + (docSmallCategory ? docSmallCategory + ' - ' : '') +
					this.userInfo?.employee?.name +
					' - ' +
					moment(this.model.createTime).format('YYYY年MM月DD日')
			},
			async onSubmit() {
				await this.validateForm()
				this.isSubmit = true
				await this.setBpmBizTitle()
				try {
					this.loading = true
					var url = ''
					if (this.id) {
						url = edit
					} else {
						url = add
					}
					const response = await url({
						...this.model,
						// detailList: this.formData,
					})
					if (response.success) {
						var that = this
						// this.isSubmit = true
						// 获取流程列表
						if (this.model.id) {
							this.getProcessList(this.model.id)
						} else {
							// 判断添加的时候是否有返回id值
							if (response.result) {
								this.getProcessList(response.result)
							}
						}
						this.$refs.uToast.show({
							message: response.message,
							type: 'default',
							complete() {
								// that.isSubmit = false
							},
						})
					}
				} finally {
					// this.loading = false
				}
			},
			async onDraft() {
				// await this.validateForm()
				this.isSubmit = true
				await this.setBpmBizTitle()
				try {
					this.loading = true
					var url = ''
					if (this.id) {
						url = edit
					} else {
						url = add
					}
					const response = await url({
						...this.model,
						// detailList: this.formData,
					})
					if (response.success) {
						// this.isSubmit = true
						this.$refs.uToast.show({
							message: response.message,
							type: 'default',
							complete() {
								this.isSubmit = false
								if (getCurrentPages().length > 1) {
									uni.navigateBack()
								} else {
									uni.reLaunch({
										url: '/pages/home/home',
									})
								}
							},
						})
					} else {
						this.$refs.uToast.show({
							message: response.message,
			  			type: 'error'
						})
					}
				} finally {
					this.loading = false
				}
			},
			// 获取流程列表
			getProcessList(id) {
				if (this.isSubmit) {
					this.$refs.processConfig.showPopup = true
					this.$refs.processConfig.formUrl = this.formUrl
					this.$refs.processConfig.formUrlMobile = this.formUrlMobile
					this.$refs.processConfig.flowCode = this.flowCode
					this.$refs.processConfig.edit(id, this.processId, this.beanName)
				}
			},
			// 提交流程成功
			onOk() {
				this.$refs.uToast.show({
					message: '提交成功',
					type: 'success',
					complete() {
						if (getCurrentPages().length > 1) {
							uni.navigateBack()
						} else {
							uni.reLaunch({
								url: '/pages/home/home',
							})
						}
					},
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import url('@/assets/inputStyle.scss');

	.trip-form-data {
		::v-deep {
			.u-form-item__body {
				padding-top: 2px;
				padding-bottom: 2px;
			}
		}
	}

	.checkbox-item {
		display: flex;
		align-items: center;
	}
</style>